<script lang="ts" setup>
// #region 引入包, 函数和组件
import { useMusicStore } from "@/store"
import { inject, ref } from "vue"
import type { ProvideInject } from "../search.vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore()
const search = inject<ProvideInject>('search')
// #endregion

// #region // 变量

// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <view class="history">
    <uni-section
      class="title"
      title="搜索历史"
      type="line"
    >
      <template v-slot:right>
        <uni-icons size="40rpx" @click="music.changeHistorySearch(0)" type="trash"></uni-icons>
      </template>
    </uni-section>
    <view class="list">
      <view
        class="item"
        v-for="item in music.historySearch"
        :key="item"
        @click="search?.toResult(item)"
        >{{ item }}</view
      >
    </view>
  </view>
</template>

<style lang="scss" scoped>
.title {
  :deep(.line) {
    background: $uni-bg-color-wyyRed;
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  .item {
    margin: 0 20rpx 20rpx;
    padding: 5rpx 20rpx;
    background: #ccc;
    color: #666;
    font-size: $uni-font-size-sm;
    border-radius: 21rpx;
    line-height: 32rpx;
    box-sizing: border-box;
  }
}
</style>
